<template>
    <Menu @on-select="handleSelect"
          width="auto"
          :theme="theme2">
        <div  v-for="(navigator,index) in navigatorData" :key="index">
            <div class="navigate-group">{{navigator.title}}</div>
            <MenuGroup :title="navigator.type">
                <MenuItem
                        v-for="(subNav,i) in navigator.list"
                        :key="index + i"
                        :name="subNav.path">
                    <!--<Icon :type="subNav.icon"></Icon>-->
                    <i class="ivu-icon" :class="'ivu-icon-' + subNav.icon"></i>
                    <span>{{subNav.title.split(' ')[0]}}</span>
                    <span class="navigate-group-span">{{subNav.title.split(' ')[1]}}</span>
                </MenuItem>
            </MenuGroup>
        </div>
    </Menu>
</template>

<script>
	export default {
		name: 'LeftNavigate',
		data() {
			return {
				theme2: 'light',
            }
		},
        props:{
			navigatorData:{
				type:Array ,
                default:function () {
                    return [] ;
				}
            }
        },
		methods: {
			handleSelect(path) {
				document.body.scrollTop = 0
				document.documentElement.scrollTop = 0
				this.$nextTick(() => {
					this.$router.push(path);
				});
			},
		}
	}
</script>
<style scoped>

</style>
